import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import TraceScope from './TraceScope.es6'
import Layout from '../common/layout.jsx'
import DefaultLoadingElement from 'lib/util/defaultLoadingElement.jsx'
import DefaultNoDataElement from 'lib/util/defaultNoDataElement.jsx'
import Card from 'lib/components/card.jsx'
import CardSpec from '../common/CardSpec.jsx'
import Tab from 'lib/components/tab.jsx'
import format from 'lib/util/format'
export default class TraceView extends View{
  renderLoading(){
    return (
      <div className="widget-content">
        <DefaultLoadingElement />
      </div>
    )
  }
  renderDetail(trace){
    return (
      <div className="widget-content">
        <div className="box">
          <Card>
            <table className="text-detail">
              <tbody>
                <tr>
                  <th>发生时间：</th>
                  <td>{format.stampToTime(trace.openStamp)}</td>
                  <th>耗时：</th>
                  <td>{trace.timeUsage+'ms'}</td>
                </tr>
                <tr>
                  <th>运营商：</th>
                  <td>{trace.carries}</td>
                  <th>接入方式：</th>
                  <td>{trace.nettype}</td>
                  <th>地域：</th>
                  <td>{trace.area}</td>
                </tr>
              </tbody>
            </table>
          </Card>
        </div>
        <div className="box">
          <Card title="时序图" subtitle={(trace.closeStamp - trace.openStamp)+'ms'}>
            <ul className="handle-list">
              <li key="connect">
                <div className="handle selected">
                  {
                    trace.connectList.map((g) => {
                      var style = {
                        backgroundColor:'#C49AE8',
                        left:format.rate((g.st-trace.openStamp)/(trace.closeStamp - trace.openStamp)),
                        width:format.rate((g.et - g.st)/(trace.closeStamp - trace.openStamp)),
                        opacity:0.2,
                        zIndex:100
                      }
                      return (
                        <div className="bar-graph" style={style} data-tip={'耗时: '+(g.et - g.st) + 'ms'} data-place="right"></div>
                      )
                    })
                  }

                  <div className="bar-text">
                    <span className="name">Connect</span>
                  </div>
                </div>
              </li>
              <li key="read">
                <div className="handle selected">
                  {
                    trace.readList.map((g) => {
                      var style = {
                        backgroundColor:'#82B5FC',
                        left:format.rate((g.st-trace.openStamp)/(trace.closeStamp - trace.openStamp)),
                        width:format.rate((g.et - g.st)/(trace.closeStamp - trace.openStamp)),
                        opacity:0.2,
                        zIndex:100
                      }
                      return (
                        <div className="bar-graph" style={style} data-tip={'耗时: '+(g.et - g.st) + 'ms'} data-place="right"></div>
                      )
                    })
                  }
                  <div className="bar-text">
                    <span className="name">Read</span>
                  </div>
                </div>
              </li>
              <li key="write">
                <div className="handle selected">
                  {
                    trace.writeList.map((g) => {
                      var style = {
                        backgroundColor:'#FEC584',
                        left:format.rate((g.st-trace.openStamp)/(trace.closeStamp - trace.openStamp)),
                        width:format.rate((g.et - g.st)/(trace.closeStamp - trace.openStamp)),
                        opacity:0.2,
                        zIndex:100
                      }
                      return (
                        <div className="bar-graph" style={style} data-tip={'耗时: '+(g.et - g.st) + 'ms'} data-place="right"></div>
                      )
                    })
                  }
                  <div className="bar-text">
                    <span className="name">Write</span>
                  </div>
                </div>
              </li>
            </ul>
          </Card>
        </div>
      </div>
    )
  }
  render(){
    return (
      <div className="float-position-absolute">
        <div className="widget-float">
          <div className="widget-title">
            <a className="close iconfont" href="#/">&#xe638;</a>
            {
              this.state.trace&&this.state.trace.ip?(
                <h4>{this.state.trace.ip+':'+this.state.trace.port}</h4>
              ):null
            }
          </div>
          {this.state.trace?(
            this.renderDetail(this.state.trace)
          ):(this.state.trace!==null?(
            <div className="widget-content">
              <DefaultNoDataElement />
            </div>
          ):this.renderLoading())}
        </div>
      </div>
    )
  }
}
TraceView.defaultProps = {
  Scope:TraceScope
}
